const CreateVote = {
    template: `
        <div class="create-vote">
            <el-form :model="voteForm" :rules="rules" ref="voteForm" label-width="100px">
                <el-form-item label="投票标题" prop="title">
                    <el-input v-model="voteForm.title" placeholder="请输入投票标题"></el-input>
                </el-form-item>
                
                <el-form-item label="投票描述" prop="description">
                    <el-input type="textarea" v-model="voteForm.description" 
                             :rows="4" placeholder="请输入投票描述"></el-input>
                </el-form-item>
                
                <el-form-item label="结束时间" prop="endTime">
                    <el-date-picker v-model="voteForm.endTime" type="datetime" 
                                  placeholder="选择结束时间"></el-date-picker>
                </el-form-item>
                
                <el-form-item label="投票选项">
                    <div v-for="(option, index) in voteForm.options" :key="index" class="option-item">
                        <el-input v-model="option.text" placeholder="请输入选项内容">
                            <template #append>
                                <el-button @click="removeOption(index)" type="danger" icon="el-icon-delete">
                                </el-button>
                            </template>
                        </el-input>
                    </div>
                    <el-button type="primary" @click="addOption" plain>
                        添加选项
                    </el-button>
                </el-form-item>
                
                <el-form-item>
                    <el-button type="primary" @click="submitForm">创建投票</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    `,
    data() {
        return {
            voteForm: {
                title: '',
                description: '',
                endTime: null,
                options: [
                    { text: '' },
                    { text: '' }
                ]
            },
            rules: {
                title: [
                    { required: true, message: '请输入投票标题', trigger: 'blur' },
                    { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
                ],
                description: [
                    { required: true, message: '请输入投票描述', trigger: 'blur' }
                ],
                endTime: [
                    { required: true, message: '请选择结束时间', trigger: 'change' }
                ]
            }
        }
    },
    methods: {
        addOption() {
            this.voteForm.options.push({ text: '' });
        },
        removeOption(index) {
            if (this.voteForm.options.length > 2) {
                this.voteForm.options.splice(index, 1);
            } else {
                this.$message.warning('至少需要两个选项');
            }
        },
        async submitForm() {
            try {
                const valid = await this.$refs.voteForm.validate();
                if (!valid) return;

                const response = await fetch('/api/votes', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(this.voteForm)
                });

                if (response.ok) {
                    this.$message.success('投票创建成功');
                    this.resetForm();
                    window.location.href = '/Votes';
                } else {
                    this.$message.error('投票创建失败');
                }
            } catch (error) {
                console.error('创建投票失败:', error);
                this.$message.error('创建投票失败');
            }
        },
        resetForm() {
            this.$refs.voteForm.resetFields();
            this.voteForm.options = [
                { text: '' },
                { text: '' }
            ];
        }
    }
};

export default CreateVote; 